<template>
    <el-dialog :title="title" :visible.sync="visible" :width="width" @close="handleClose">
        <div class="statistic-summary">
            <el-row :gutter="15">
                <el-col :span="8">
                    <div class="summary-item item-total">
                        <p class="item-label">总消耗</p>
                        <p class="item-value">¥{{ data.totalConsumption }}</p>
                    </div>
                </el-col>

                <!-- 平均值 - 绿色边框 -->
                <el-col :span="8">
                    <div class="summary-item item-average">
                        <p class="item-label">均价</p>
                        <p class="item-value">¥{{ data.averageValue }}</p>
                    </div>
                </el-col>

                <!-- 总数量 - 橙色边框 -->
                <el-col :span="8">
                    <div class="summary-item item-count">
                        <p class="item-label">总数量</p>
                        <p class="item-value">{{ data.totalCount }}</p>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div style="width: 100%;">
            <el-table :data="data.productConsumptionDetails">
                <el-table-column prop="name" label="产品名称" />
                <el-table-column prop="priceAmount" label="消耗金额" width="150" />
                <el-table-column label="占比" width="200">
                    <template slot-scope="scope">
                        <el-progress
                            :percentage="Number((scope.row.priceAmount / data.totalConsumption * 100).toFixed(1))"
                            :stroke-width="6" />
                    </template>
                </el-table-column>
                <el-table-column prop="avgAmount" label="均价" width="120" />
                <el-table-column prop="totalCount" label="数量" width="120" />
            </el-table>
        </div>

    </el-dialog>
</template>

<script>
export default {
    name: 'DataDialog',
    props: {
        // 弹窗标题，可通过open方法覆盖
        title: {
            type: String,
            default: '商户消耗统计'
        },
        // 弹窗宽度，可通过open方法覆盖
        width: {
            type: String,
            default: '800px'
        }
    },
    data() {
        return {
            // 控制弹窗显示状态
            visible: false,
            // 弹窗数据
            data: {
                totalConsumption: 0,
                averageValue: 0,
                totalCount: 0,
                productConsumptionDetails: []
            }
        }
    },
    methods: {
        /**
         * 打开弹窗并传入数据
         * @param {Object} options - 包含弹窗数据和配置的对象
         * @param {Object} options.data - 弹窗要显示的数据
         * @param {String} [options.title] - 弹窗标题，可选
         * @param {String} [options.width] - 弹窗宽度，可选
         */
        open(options) {
            console.log(options)
            let productData = JSON.parse(JSON.stringify(options.productConsumptionDetails)) ;
            let firstFruit = productData.shift();
            this.data.productConsumptionDetails = productData
            this.data.totalConsumption = firstFruit.priceAmount
            this.data.averageValue = firstFruit.avgPrice
            this.data.totalCount = productData.reduce((pre, curr) => {
                return pre + curr.totalCount
            }, 0)
            // 显示弹窗
            this.visible = true
        },

        /**
         * 关闭弹窗
         */
        close() {
            this.visible = false
        },

        /**
         * 处理弹窗关闭事件
         */
        handleClose() {
            this.visible = false
            this.$emit('close')
        }
    }
}
</script>

<style scoped>
.statistic-summary {
    margin-bottom: 20px;
}

.summary-item {
    text-align: center;
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 4px;
    position: relative;
    /* 添加左侧边框空间 */
    padding-left: 15px;
    transition: transform 0.2s;
}

/* 鼠标悬停效果 */
.summary-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 左侧边框颜色区分 */
.item-total {
    border-left: 4px solid #409eff;
    /* 蓝色 - 总消耗 */
}

.item-average {
    border-left: 4px solid #67c23a;
    /* 绿色 - 平均值 */
}

.item-count {
    border-left: 4px solid #e6a23c;
    /* 橙色 - 总数量 */
}

.item-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 5px;
}

.item-value {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
}
</style>
